<template>
  <div class="basicsBox" v-show="isMainPage">
    <el-tabs v-model="activeName" class="tabs"  @tab-click="handleClick">
			<el-tab-pane label="全部" name="qb"></el-tab-pane>
			<el-tab-pane label="能源化工" name="nyhg"></el-tab-pane>
			<el-tab-pane label="黑色金属" name="hsjs"></el-tab-pane>
			<el-tab-pane label="有色金属" name="ysjs"></el-tab-pane>
			<el-tab-pane label="农产品" name="ncp"></el-tab-pane>
			<el-tab-pane label="股指期货" name="gzqh"></el-tab-pane>
			<el-tab-pane label="期货综合" name="qhzh"></el-tab-pane>
			<el-tab-pane label="金融期货" name="jrqh"></el-tab-pane>
			<el-tab-pane label="金工量化" name="jglh"></el-tab-pane>
			<el-tab-pane label="宏观策略" name="hgcl"></el-tab-pane>
		</el-tabs>
    <Item :data="data"  @click="showDetail"></Item>
  </div>
  
    <router-view></router-view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import type { TabsPaneContext } from 'element-plus'
import Item from './conponents/Item.vue';
import { useRoute } from 'vue-router'
import router from '@/router';

const route = useRoute()
const isMainPage = computed(() => {
	return route.path === '/home/sjzb'
})
const data = ref([]) as any
data.value = [
			{
				time: '20:46:51',
				title: '玻璃&纯碱重点数据日度跟踪2025062',
				content:
					'综合点评： 今日玻璃期价小幅震荡，基本面,今日玻璃期价小幅震荡，基本面今日玻璃期价小幅震荡，基本面',
				laiyuan: '金十数据',
				images: [],
				isMain: true,
			},
			{
				time: '20:46:51',
				title: '玻璃&纯碱重点数据日度跟踪2025062',
				content:
					'综合点评： 今日玻璃期价小幅震荡，基本面,今日玻璃期价小幅震荡，基本面今日玻璃期价小幅震荡，基本面',
				laiyuan: '金十数据',
				images: [],
				isMain: true,
			},
		]
const activeName = ref('qb')
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab.props.name)
}
function showDetail(item:any) {
  console.log('item',item);
  router.push({name:'zbxq',params:{data:item}})
}
</script>

<style lang="less" scoped>
:deep(.el-tabs__item) {
	font-size: 18px;
	font-weight: 600;
}
</style>